<template>
  <el-dialog
    title="Add designs"
    :visible.sync="dialogVisible"
    width="800px"
    append-to-body
    @close="closeDialog"
  >
    <div>
      <el-form
        ref="ruleForm"
        :model="design"
        :rules="rules"
        :label-width="formLabelWidth"
      >
        <div class="title">
          Basic Information
        </div>
        <el-row type="flex" justify="space-between">
          <el-form-item prop="sku" label="Design Name">
            <el-input v-model="design.sku" />
          </el-form-item>
          <el-form-item prop="materialGroupId" label="Design Group">
            <el-select
              v-model="design.materialGroupId"
              placeholder="design group"
              @visible-change="materialGroupList"
            >
              <el-option
                v-for="item in groupOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-form-item
            prop="thumbnailUri"
            label="Design Image"
            class="thumbnailUri"
          >
            <upload-image :img-url="design.thumbnailUri" @getImg="mainImg" />
          </el-form-item>
          <el-form-item prop="zipUri" label="Design File">
            <upload-zip :file-url="design.zipUri" @succ="onSucc" />
          </el-form-item>
        </el-row>

        <div class="title">
          Product Information
          <el-button type="text" @click="addVariant">Add Product</el-button>
        </div>
        <div v-for="(item, index) in variants" :key="index" class="variantItem">
          <div class="leftArea">
            <el-row type="flex" justify="space-between">
              <el-form-item label="Product Sku" required>
                <el-input v-model="item.variantSku" clearable />
              </el-form-item>
              <el-form-item
                ref="imgItem"
                label="Product Image"
                style="width: 337px;"
                required
              >
                <upload-image
                  :img-url="item.thumbnailUri"
                  :n-index="index"
                  @getImg="variantImg"
                />
              </el-form-item>
            </el-row>
          </div>
          <div class="rightArea">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteVariant(index)"
            />
          </div>
        </div>
        <div v-if="variants.length === 0" class="tip">
          <!-- 暂无变种信息 -->
          No variant information available!
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">Cancel</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="submitData('ruleForm')"
        >Confirm</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { materialAdd, materialGroupList } from '@/api/material';
import UploadImage from '@/components/Upload/uploadImg';
import UploadZip from '@/components/Upload/uploadZip';
import { checkHalf } from '@/utils/validate';
export default {
  components: {
    UploadImage,
    UploadZip
  },
  data() {
    return {
      dialogVisible: true,
      design: {},
      variants: [],
      thumbnailUri: '',
      rules: {
        name: [{ validator: this.checkStr, required: true }],
        sku: [{ validator: checkHalf, required: true }],
        materialGroupId: [
          {
            required: true,
            message: 'Please select the design group',
            trigger: 'change'
          }
        ],
        thumbnailUri: [
          {
            required: true,
            message: 'Please upload pictures',
            trigger: 'change'
          }
        ],
        zipUri: [
          {
            required: true,
            message: 'Please upload the design file',
            trigger: 'change'
          }
        ]
      },
      groupOptions: [],
      formLabelWidth: '155px'
    };
  },
  mounted() {},
  methods: {
    submitData(ruleForm) {
      this.$refs[ruleForm].validate(async(valid) => {
        if (valid) {
          if (this.variants.length > 0) {
            var res = true;
            this.variants.forEach((item) => {
              if (item.variantSku === '' || item.thumbnailUri === undefined) {
                res = false;
              }
            });
            if (!res) {
              this.$message.warning('Please complete the variant information');
              return;
            }
          }
          materialAdd({
            material: this.design,
            materialVariants: this.variants
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success('success');
              this.closeDialog(true);
            }
          });
        } else {
          return false;
        }
      });
    },
    materialGroupList(val) {
      // 素材分组列表
      if (val === true) {
        materialGroupList().then((res) => {
          this.groupOptions = res.data;
        });
      }
    },
    closeDialog(state) {
      // 添加后true，直接取消false/不传
      this.$emit('closeAddDesign', true);
    },
    mainImg(arr) {
      this.design.thumbnailUri = arr[0];
      this.$refs.ruleForm.clearValidate('thumbnailUri');
      this.rules['thumbnailUri'] = [];
    },
    variantImg(arr) {
      this.variants[arr[1]].thumbnailUri = arr[0];
    },
    onSucc(uri) {
      this.design.zipUri = uri;
      this.$refs.ruleForm.clearValidate('zipUri');
      this.rules['zipUri'] = [];
    },
    addVariant() {
      // 添加变种信息
      this.variants.push({
        variantSku: this.design.sku || ''
      });
    }
  }
};
</script>

<style scoped lang="scss">
.title {
  background: #f6f6f6;
  height: 32px;
  line-height: 32px;
  padding: 0 20px 0 10px;
  margin-bottom: 15px;
  .el-button {
    float: right;
  }
}
.tip {
  text-align: center;
  font-size: 13px;
  color: #848484;
}
.variantItem {
  display: flex;
  border-top: 1px solid #ddd;
  padding-top: 10px;
  margin-top: -15px;
  .leftArea {
    flex: 1;
  }
  .rightArea {
    width: 50px;
    text-align: center;
  }
}
.dialog-footer {
  padding: 20px 0 10px;
  text-align: right;
}
</style>
